<template>
  <uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" @change='change' :safe-area="false">
    <view class="info-wrapper">
      <view class="info-title">
        <image :src="imgObj[vdata.record.deviceType]" mode="scaleToFill" />
        <view class="info-content">
          <view class="info-name">
            <text>{{ vdata.record?.storeName || vdata.record?.deviceName }}</text>
            <view class="icon-close" @tap="popup.close()">
              <image src="/static/iconImg/icon-x.svg" mode="scaleToFill" />
            </view>
          </view>
          <view class="sub-name">{{ vdata.record?.storeId || vdata.record?.deviceNo }}</view>
        </view>
      </view>
      <view class="stat-card">
        <view class="stat-money">
          <view class="stat-title">实收金额 (元)</view>
          <view class="stat-num-title">{{ cal.cert2Dollar(vdata.payAmount) }}</view>
        </view>
        <view class="stat-card-info">
          <view class="stat-item">
            <view class="stat-title">退款金额 (元)</view>
            <view class="stat-num">{{ cal.cert2Dollar(vdata.refundAmount) }}</view>
          </view>
          <view class="stat-item">
            <view class="stat-title">退款笔数</view>
            <view class="stat-num">{{ vdata.refundCount }}</view>
          </view>
          <view class="stat-item">
            <view class="stat-title">交易成功笔数</view>
            <view class="stat-num">{{ vdata.payCount }}</view>
          </view>
          <view class="stat-item">
            <view class="stat-title">总交易金额 (元)</view>
            <view class="stat-num">{{ cal.cert2Dollar(vdata.allAmount) }}</view>
          </view>
          <view class="stat-item">
            <view class="stat-title">总交易笔数</view>
            <view class="stat-num">{{ vdata.allCount }}</view>
          </view>
          <view class="stat-item">
            <view class="stat-title">交易成功率</view>
            <view class="stat-num">{{ vdata.round }}%</view>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { onMounted, reactive, ref,inject } from 'vue'
import { $getStatInfo, $getStatistic } from '@/http/apiManager.js'
import cal from '@/commons/utils/cal.js'

// 获取弹窗实例
const popup = ref(null)
const vdata = reactive({
  record: {},
})
const imgObj = reactive({
  store: '/static/indexImg/icon-store.svg',
  qr_code: '/pageDevice/static/devIconImg/icon-code.svg',
  scan_pos: '/pageDevice/static/devIconImg/icon-pos.svg',
  auto_pos: '/pageDevice/static/devIconImg/icon-scanPos.svg',
  cash_plugin: '/pageDevice/static/devIconImg/icon-horn.svg',
})
const getInfo = (params) => {
  $getStatInfo(params).then(({ bizData }) => {
    Object.assign(vdata, bizData)
  })
}
const open = (params, record) => {
  const obj = JSON.parse(JSON.stringify(params))
  vdata.record = record
  if (!vdata.record.deviceType) vdata.record.deviceType = 'store'
  obj.deviceNo = record.deviceNo ? record.deviceNo : ''
  obj.storeId = record.storeId ? record.storeId : ''
  getInfo(obj)
  popup.value.open()
}
let changePageMetaOverflowFunc = inject('changePageMetaOverflowFunc')
const change = (e)=>{
  if(changePageMetaOverflowFunc){
    changePageMetaOverflowFunc(!e.show)
  }
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.info-wrapper {
  height: 777rpx;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
}
.info-title {
  display: flex;
  align-items: center;
  padding: 0 40rpx;
  height: 160rpx;
  border-bottom: 1rpx solid #ededed;
  image {
    margin-right: 20rpx;
    width: 100rpx;
    height: 100rpx;
  }
  .info-content {
    flex: 1;
    .info-name {
      display: flex;
      justify-content: space-between;
      font-size: 30rpx;
      font-weight: 500;
      .icon-close {
        width: 50rpx;
        height: 50rpx;
        border-radius: 10rpx;
        background-color: #f2f2f2;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .sub-name {
      font-size: 26rpx;
      color: #808080;
    }
  }
}
.stat-card {
  position: relative;
  margin: 0 30rpx;
  background-color: $J-bg-ff;
  border-radius: $J-b-r32;
  .stat-title {
    white-space: nowrap;
    margin-bottom: 10rpx;
    font-size: 24rpx;
    color: #a6a6a6;
  }
  .stat-money {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 202rpx;
    box-shadow: 0 50rpx 70rpx -60rpx rgba(107, 130, 153, 0.2);
    .stat-num-title {
      font-size: 60rpx;
      font-weight: 700;
      color: #2980fd;
    }
  }
  .stat-card-info {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 68rpx 50rpx 68rpx;
    .stat-item {
      width: 175rpx;
      margin-top: 50rpx;
      text-align: center;
      .stat-num {
        font-size: 30rpx;
        font-weight: 700;
      }
    }
  }
  .stat-tips {
    position: absolute;
    top: 30rpx;
    right: 30rpx;
  }
}
</style>
